<!DOCTYPE html>
<html lang="zh-CN" data-current-lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端开发工程师 | 个人作品集 | [lxy]</title>
    <meta name="description" content="专注于创建美观、响应式且用户友好的现代网站，精通HTML5、CSS3、JavaScript、React等前端技术。">
    <meta name="keywords" content="前端开发,Web开发,React,Vue,JavaScript,HTML5,CSS3,响应式设计,作品集">
    <meta name="author" content="[lxy]">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="7 days">
    <link rel="canonical" href="https://example.com">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Open Graph 协议 -->
    <meta property="og:title" content="前端开发工程师 | 个人作品集 | [lxy]">
    <meta property="og:description" content="专注于创建美观、响应式且用户友好的现代网站，精通HTML5、CSS3、JavaScript、React等前端技术。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://example.com">
    <meta property="og:image" content="https://via.placeholder.com/1200x630">
    
    <!-- Twitter 卡片 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="前端开发工程师 | 个人作品集 | [lxy]">
    <meta name="twitter:description" content="专注于创建美观、响应式且用户友好的现代网站，精通HTML5、CSS3、JavaScript、React等前端技术。">
    <meta name="twitter:image" content="https://via.placeholder.com/1200x630">
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <!-- 导航栏 -->
        <nav id="navbar">
            <div class="container">
                <a href="#home" class="logo">Portfolio</a>
                <div class="nav-links">
                    <a href="#home" data-i18n="nav.home">首页</a>
                    <a href="#about" data-i18n="nav.about">关于</a>
                    <a href="#projects" data-i18n="nav.projects">项目</a>
                    <a href="#contact" data-i18n="nav.contact">联系</a>
                </div>
                <div class="language-switcher">
                    <button id="lang-zh" class="lang-btn active">中文</button>
                    <button id="lang-en" class="lang-btn">EN</button>
                </div>
                <button id="theme-toggle" class="theme-toggle" aria-label="切换主题">
                    <i class="fa-solid fa-sun"></i>
                </button>
                <button class="menu-toggle" aria-label="菜单切换">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </nav>
    </header>

    <!-- 主要内容区域 -->
    <main>
        <!-- 英雄介绍区域 -->
        <section id="home" class="hero">
            <div class="container">
                <div class="hero-content">
                    <h1 class="text-gradient" data-i18n="hero.greeting">你好，我是<span class="highlight">[lxy]</span></h1>
                    <p class="fade-in delay-200" data-i18n="hero.title">前端开发工程师</p>
                    <p class="fade-in delay-300" data-i18n="hero.subtitle">专注于创建美观、响应式且用户友好的现代网站</p>
                    <div class="cta-buttons fade-in delay-400">
                        <a href="#projects" class="btn primary" data-i18n="cta.viewProjects">查看作品</a>
                        <a href="#contact" class="btn secondary" data-i18n="cta.contactMe">联系我</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于我区域 -->
        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title" data-i18n="about.title">关于我</h2>
                <div class="about-content">
                    <div class="about-img slide-in-left">
                        <img src="https://picsum.photos/seed/developer/500/500" alt="Python Developer 照片" loading="lazy">
                    </div>
                    <div class="about-text slide-in-right">
                    <p class="fade-in delay-100" data-i18n="about.intro1">你好，我是一名经验丰富的Python Developer，擅长消息中间件、实时数据处理和高可用架构设计。我对技术充满热情，尤其热衷于探索新的编程范式和解决复杂的系统设计问题。</p>
                    <p class="fade-in delay-200" data-i18n="about.intro2">在技术栈方面，我对Python和MongoDB最为熟悉，其次是Next.js和ElasticSearch，最后是Rust。除了编程，我还喜欢Rust编程语言、动画《幸运星》和《孤独摇滚》，以及户外活动《摇曳露营》。</p>
                    
                    <!-- 专业技能 -->
                    <div class="skills fade-in delay-300">
                        <h3 data-i18n="skills.title">专业技能</h3>
                        <div class="skill-list">
                            <span class="hover-scale" style="font-size: 1.2em; color: #4285F4;">Python</span>
                            <span class="hover-scale" style="font-size: 1.2em; color: #47A248;">MongoDB</span>
                            <span class="hover-scale" style="font-size: 1.1em; color: #0070F3;">Next.js</span>
                            <span class="hover-scale" style="font-size: 1.1em; color: #005571;">ElasticSearch</span>
                            <span class="hover-scale" style="font-size: 1em; color: #DEA584;">Rust</span>
                            <span class="hover-scale">消息中间件</span>
                            <span class="hover-scale">实时数据处理</span>
                            <span class="hover-scale">高可用架构设计</span>
                        </div>
                    </div>
                    
                    <!-- 专业经历时间线 -->
                    <div class="timeline slide-in-up delay-100">
                        <h3 data-i18n="timeline.title">专业经历</h3>
                        <div class="timeline-items">
                            <div class="timeline-item">
                                <div class="timeline-date">2021-2023</div>
                                <div class="timeline-content">
                                    <h4>OpenAI</h4>
                                    <p>软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2017-2020</div>
                                <div class="timeline-content">
                                    <h4>Google</h4>
                                    <p>软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2014-2016</div>
                                <div class="timeline-content">
                                    <h4>斯坦福大学</h4>
                                    <p>硕士</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2010-2014</div>
                                <div class="timeline-content">
                                    <h4>清华大学</h4>
                                    <p>本科</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 个人成就 -->
                    <div class="achievements slide-in-up delay-200">
                        <h3 data-i18n="achievements.title">个人成就</h3>
                        <div class="achievement-list">
                            <div class="achievement-item">
                                <i class="fas fa-trophy"></i>
                                <span>清华大学优秀毕业生</span>
                            </div>
                            <div class="achievement-item">
                                <i class="fab fa-microsoft"></i>
                                <span>微软MVP</span>
                            </div>
                            <div class="achievement-item">
                                <i class="fab fa-huawei"></i>
                                <span>华为开发者认证</span>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </section>

        <!-- 项目展示区域 -->
        <section id="projects" class="projects">
            <div class="container">
                <h2 class="section-title" data-i18n="projects.title">我的项目</h2>
                <div class="project-grid">
                    <!-- 项目卡片 1 -->
                    <article class="project-card slide-in-up delay-100">
                        <div class="project-img">
                            <img src="https://picsum.photos/seed/ecommercesite/1200/800" alt="现代电子商务网站界面" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h3 data-i18n="project1.title">电子商务网站</h3>
                            <p data-i18n="project1.desc">一个功能齐全的电子商务平台，支持产品浏览、购物车、支付等功能。</p>
                            <div class="project-tech">
                                <span>React</span>
                                <span>Node.js</span>
                                <span>MongoDB</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-i18n="project.viewDetails">查看详情</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 2 -->
                    <article class="project-card slide-in-up delay-200">
                        <div class="project-img">
                            <img src="https://picsum.photos/seed/companyportal/1200/800" alt="企业门户网站项目截图" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h3 data-i18n="project2.title">企业门户网站</h3>
                            <p data-i18n="project2.desc">为一家科技公司设计和开发的响应式企业门户网站。</p>
                            <div class="project-tech">
                                <span>HTML5</span>
                                <span>CSS3</span>
                                <span>JavaScript</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-i18n="project.viewDetails">查看详情</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 3 -->
                    <article class="project-card slide-in-up delay-300">
                        <div class="project-img">
                            <img src="https://picsum.photos/seed/dashboard/1200/800" alt="电商数据分析仪表板" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h3 data-i18n="project3.title">电商数据分析仪表板</h3>
                            <p data-i18n="project3.desc">使用D3.js构建的交互式数据可视化仪表板，为电商平台提供销售和用户行为分析。</p>
                            <div class="project-tech">
                                <span>D3.js</span>
                                <span>Vue.js</span>
                                <span>Chart.js</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-i18n="project.viewDetails">查看详情</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 4 -->
                    <article class="project-card slide-in-up delay-400">
                        <div class="project-img">
                            <img src="https://picsum.photos/seed/ecommerceapp/1200/800" alt="电商移动应用界面" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h3 data-i18n="project4.title">电商移动应用</h3>
                            <p data-i18n="project4.desc">一个具有实时聊天和内容分享功能的社交媒体Web应用，集成了电商功能。</p>
                            <div class="project-tech">
                                <span>React Native</span>
                                <span>Firebase</span>
                                <span>Socket.io</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-i18n="project.viewDetails">查看详情</a>
                            </div>
                        </div>
                    </article>
                    
                    <!-- 项目卡片 5 -->
                    <article class="project-card slide-in-up delay-500">
                        <div class="project-img">
                            <img src="https://picsum.photos/seed/adminpanel/1200/800" alt="电商后台管理系统" loading="lazy">
                        </div>
                        <div class="project-info">
                            <h3 data-i18n="project5.title">电商后台管理系统</h3>
                            <p data-i18n="project5.desc">为电商平台设计的功能完善的后台管理系统，支持订单、商品、用户和数据分析。</p>
                            <div class="project-tech">
                                <span>Vue.js</span>
                                <span>Node.js</span>
                                <span>MySQL</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-i18n="project.viewDetails">查看详情</a>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- 联系表单区域 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title" data-i18n="contact.title">联系我</h2>
                <div class="contact-content">
                    <div class="contact-info slide-in-left">
                        <h3 data-i18n="contact.info">联系方式</h3>
                        <ul>
                            <li><i class="fas fa-envelope"></i> 3164428264@qq.com</li>
                            <li><i class="fas fa-phone"></i> +86 123 4567 8901</li>
                            <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区</li>
                        </ul>
                        <div class="social-links">
                            <a href="https://kirineko.github.io" target="_blank" aria-label="个人网页"><i class="fas fa-globe"></i></a>
                            <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
                            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                            <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <div class="contact-form slide-in-right">
                        <form id="contactForm" method="POST">
                            <div class="form-group">
                                <label for="name" data-i18n="contact.form.name">姓名</label>
                                <input type="text" id="name" name="name" data-i18n-placeholder="contact.form.placeholder.name" placeholder="请输入您的姓名" required>
                            </div>
                            <div class="form-group">
                                <label for="email" data-i18n="contact.form.email">邮箱</label>
                                <input type="email" id="email" name="email" data-i18n-placeholder="contact.form.placeholder.email" placeholder="请输入您的邮箱" required>
                            </div>
                            <div class="form-group">
                                <label for="subject" data-i18n="contact.form.subject">主题</label>
                                <input type="text" id="subject" name="subject" data-i18n-placeholder="contact.form.placeholder.subject" placeholder="请输入主题" required>
                            </div>
                            <div class="form-group">
                                <label for="message" data-i18n="contact.form.message">消息</label>
                                <textarea id="message" name="message" rows="5" data-i18n-placeholder="contact.form.placeholder.message" placeholder="请输入您的消息内容" required></textarea>
                            </div>
                            <button type="submit" class="btn primary" data-i18n="contact.form.submit">发送消息</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <p data-i18n="footer.thanks">感谢您访问我的个人作品集网站！</p>
                <div class="footer-links">
                    <a href="#home" data-i18n="nav.home">首页</a>
                    <a href="#about" data-i18n="nav.about">关于</a>
                    <a href="#projects" data-i18n="nav.projects">项目</a>
                    <a href="#contact" data-i18n="nav.contact">联系</a>
                </div>
                <p class="copyright" data-i18n="footer.copyright">&copy; 2023 [lxy]. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script src="main.js"></script>
</body>
</html>